<template>
    <!-- 2. 通过 ref 属性, 将刚才创建的响应式数据绑定给 某一个标签/组件  (绑定的时候不需要添加 冒号) -->
    <h1 ref="myh1">我是首页的内容</h1>

    <!--
        组合式 API 中 获取 标签/组件
            1. 通过 ref 方法 创建一个响应式数据
            2. 通过 ref 属性, 将刚才创建的响应式数据绑定给 某一个标签/组件  (绑定的时候不需要添加 冒号)
            3. 在某一个合适的时机, 你需要访问标签的时候, 可以直接通过 响应式数据访问到标签
    -->
    <button @click="getH1">获取标签</button>
</template>

<script setup>
import { ref } from 'vue'

// 1. 通过 ref 方法 创建一个响应式数据
const myh1 = ref(null)

function getH1() {
    // 3. 在某一个合适的时机, 你需要访问标签的时候, 可以直接通过 响应式数据访问到标签
    console.log('获取 h1 标签: ', myh1.value)
}
</script>
